<template>
    <!--设备列表-->
    <n-h6 type="info" prefix="bar">
        <n-text>设备列表</n-text>
    </n-h6>
    <n-space class="ms-3 pb-1" vertical v-for="device of deviceList">
        <n-button class="text-base ps-2 pe-2 rounded-sm" :disabled="!device.status">
            <n-text class="flex bg-slate-700 p-1 rounded-sm">
                <n-icon :component="device.icon"></n-icon>
            </n-text>
            <n-text class="indent-2">{{ device.name }}</n-text>
        </n-button>
    </n-space>
</template>

<script setup>
import {CubeRotate20Filled} from '@vicons/fluent'
import {ChartRadial} from '@vicons/carbon'
import {Radio} from '@vicons/ionicons5'
const deviceList = ref()
const getDevice = () => {
    console.log()
    deviceList.value = [
        {name: "蓝转台", icon: CubeRotate20Filled, status: true},
        {name: "光学头", icon: ChartRadial, statue: false},
        {name: "广播", icon: Radio, status: false}
    ]
}
onMounted(() => {
    getDevice()
})
</script>

<style scoped>

</style>
